<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>js的使用方式</title>
    <style>
      /* CSS注释 */
    </style>
    <script>
      // JS单行注释
      /* JS多行注释 */
      alert('head中的script标签代码运行了...')
    </script>
  </head>
  <body>
    <!-- 
      JS的使用方式一 - 行内JS: 在HTML标签内部使用事件(onXXX)来触发JS

      缺点:
      1.不适合书写过多的代码,否则会造成JS代码和HTML代码混淆在一起,不便于后期的维护
      2.由于JS代码直接绑定在HTML标签上,所以无法复用
     -->
    <button type="button" onclick="alert('你好!')">按钮1</button>
    <button
      type="button"
      onclick="let now = new Date();let year = now.getFullYear();let month = now.getMonth() + 1;let day = now.getDate();alert(year+'/' + month + '/' + day)"
    >
      按钮2
    </button>
    <button class="btn" type="button">按钮3</button>
    <button class="btn" type="button">按钮4</button>
    <button class="btn" type="button">按钮5</button>

    <!-- 
      JS的使用方式二 -- 内部JS: 使用script标签来运行JS
      注意: 
      script标签在html中的位置是任意的,一般写在head中或者body最下面
      但是书写时需要注意顺序,例如给元素绑定功能时,元素必须先初始化
      一般代码量较大时,推荐写在body最下面,有助于提升用户体验(先看到页面,然后再加载功能)

      缺点:
      js代码只能在当前页面中复用,无法给其他页面使用
     -->
    <!-- <script>
      // alert('script标签中的JS代码...')
      document.querySelectorAll('.btn').forEach(
        btn =>
          (btn.onclick = function () {
            let now = new Date()
            let year = now.getFullYear()
            let month = now.getMonth() + 1
            let day = now.getDate()
            alert(year + '/' + month + '/' + day)
          })
      )
    </script> -->

    <!-- 
        JS的使用方式三 -- 外部JS: 加载外部JS文件来运行JS 
        注意: 如果script标签使用了src属性来导入外部js文件,则script标签之间的代码将无效!!!
    -->
    <script src="js/01.js">
      // alert('底部script标签中的代码...')
    </script>
  </body>
</html>
